<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="visible"
      width="30%"
      :before-close="onClose">
      <span>所属课程</span>
      <el-autocomplete
        class="inline-input"
        v-model="selectedCourse"
        :fetch-suggestions="queryCourse"
        placeholder="请输入课程"
        @select="selectCourse"
      ></el-autocomplete>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onIssueEvn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {experimentModel, courseModel} from '@/api/models.js'
import {Message} from 'element-ui'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    env_id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      selectedCourse: null,
      course_id: null
    }
  },
  methods: {
    onClose() {
      this.$emit("onClose")
    },
    queryCourse(qs, cb) {
      courseModel.list({
        course_name: qs
      }, res => {
        let r = res.data.map(v => {
          return {
            id: v.course_id,
            value: v.course_name
          }
        })
        cb(r);
      }) 
    },
    selectCourse(item) {
      this.selectCourse = item.value
      this.course_id = item.id
    },
    onIssueEvn() {
      if(this.env_id <= 0 || this.course_id <= 0) {
        return Message.warning('请选择要下发的课程及实例');
      }
      experimentModel.envIssue({
        environment_id: this.env_id,
        course_id: this.course_id
      }, res => {
        Message.success(res.message);
        this.onClose();
      }, err => {
        Message.warning(err.message);
      })
    },
  }
}
</script>